@import url('_config.less');

@media all and (max-width: (@siteWidth + 80px)) {
    .header-inner, .nav-inner, footer, .content-block, .video-layer-inner {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media all and (max-width: 900px) {
    .header-inner, .nav-inner, footer, .content-block, .video-layer-inner {
        padding-left: 30px;
        padding-right: 30px;
    }
    #features {
        .feat:nth-of-type(3n+1) {
            clear: none;
        }
        .feat:nth-of-type(2n+1) {
            clear: both;
        }
        .feat {
            width: 50%;
        }
    }
    #about {
        margin-bottom: 0px;
        .phones {
            float: none;
            margin: 0 auto;
            width: 464px;
            margin-bottom: 60px;
        }
        .info {
            margin-left: 0;
            float: none;
        }
        h2 {
            text-align: center;
            margin-left: 40px;
            margin-right: 40px;
        }
    }
    
}
@media all and (max-width: 768px) {
    nav li {
        margin-left: 30px;
    }
}
@media all and (max-width: 640px) {
    .header-inner, .nav-inner, footer, .content-block, .video-layer-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    #download {
        .app-icon {
            width: 150px;
            height: 150px;
        }
        .info {
            margin-left: 180px;
        }
        h1 {
            font-size: 35px;
            font-weight: 300;
        }
        .slogan {
            font-size: 25px;
        }
    }
    footer .social {
        padding: 30px 50px;
    }
    nav {
        display: none;
    }
    header {
        height: 500px;
        .logo {
            margin-top: 70px;
        }
        .open-video {
            font-size: 25px;
            height: 50px;
            line-height: 50px;
        }
        .slogan {
            font-size: 35px;
            line-height: 1.3;
        }
    }
    
}
@media all and (max-width: 568px) {
    #download {
        margin-top: 50px;
        .app-icon {
            width: 200px;
            height: 200px;
            float: none;
            margin: 0 auto;
            margin-bottom: 30px;
        }
        .info {
            margin-left: 0;
            text-align: center;
        }
        .appstore-link {
            margin-left: auto;
            margin-right: auto;
        }
    }
    #about {
        .phones {
            width: 312px;
            margin: 0 auto;
            float: none;
        }
        .phone-left {
            display: none;
        }
        .phone-right {
            margin: 0;
        }
        h2 {
            margin-left: 0;
            margin-right: 0;
        }
    }
    #features {
        .feat {
            float: none;
            width: 100%;
            padding: 0;
        }
    }
    #reviews {
        .review {
            float: none;
            width: 100%;
        }
    }
    footer {
        font-size: 15px;
    }
}
@media all and (max-width: 350px) {
    body {
        font-size: 15px;
    }
    h1,h2,h3 {
        font-weight: normal;
    }
    #download {
        margin-bottom: 50px;
        .app-icon {
            width: 150px;
            height: 150px;
        }
        h1 {
            font-size: 25px;
            font-weight: normal;
        }
        .slogan {
            font-size: 18px;
            font-weight: normal;
        }
        .appstore-link {
            width: 200px;
            height: 60px;
        }
    }
    #about {
        margin: 50px 0 0;
        h2 {
            font-size: 25px;
            margin-left: 0;
            margin-right: 0;
        }
        .phone,.phones {
            width: 264px;
            height: 469px;
        }
        .phone {
            box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
        }
        .phones {
            margin-bottom: 50px;
        }
        .shadow {
            display: none;
        }
        .phone-bg {
            display: none;
        }
        .swiper-container {
            left: 0;
            top: 0;
        }
    }
    #features {
        h2 {
            font-size: 25px;
        }
        h3 {
            font-size: 20px;
        }
    }
    #reviews {
        padding-top: 20px;
        padding-bottom: 20px;
        .review {
            margin: 15px 0;
        }
        .quote {
            font-size: 21px;
        }
        .author {
            font-size: 15px;
        }
        .star {
            width: 30px;
            height: 30px;
        }
    }
    footer .social {
        padding: 30px 0px;
        overflow: hidden;
        a {
            float: left;
            width: 50%;
            margin: 0;
            text-align: center;
        }
    }
}
